<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <!-- <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> -->
    <script src="../js/jquery-3.7.1.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"
            integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous">
    </script>
    <!-- 引入 layui.css -->
    <link href="//unpkg.com/layui@2.9.21-rc/dist/css/layui.css" rel="stylesheet">
    <!-- 引入 layui.js -->
    <script src="//unpkg.com/layui@2.9.21-rc/dist/layui.js"></script>
    <style>
        button {
            outline: none !important;
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-10">
            <!-- 搜索区域 -->
            <div class="panel panel-default">
                <div class="panel-heading">搜索</div>
                <div class="panel-body">
                    <form class="form-inline">
                        <div class="form-group">
                            <label>字段</label>
                            <select name="key" class="form-control" id="">
                                <option value="username">宿舍</option>
                                <option value="name">姓名</option>
                                <option value="telephone">学号</option>
                            </select>

                        </div>
                        <div style="margin-left: 20px;" class="form-group">
                            <label>值</label>
                            <input style="width: 130px;" type="text" class="form-control"
                                   id="keyword" placeholder="">
                        </div>
                        <div class="form-group" style="margin-left: 40px;">
                            <button type="button" class="btn btn-ms btn-info"> <span
                                    class="glyphicon glyphicon-zoom-in"></span>搜索
                            </button>
                        </div>
                        <div class="form-group" style="margin-left: 40px;">
                            <button id="add-student" type="button" class="btn btn-ms btn-primary" data-toggle="modal"
                                    data-target="#addModal"><span
                                    class="glyphicon glyphicon-plus"></span>添加学生
                            </button>
                        </div>
<!--                        <div class="form-group" style="margin-left: 40px;">-->
<!--                            <button class="btn btn-danger"><span class="glyphicon glyphicon-minus"></span>删除-->
<!--                            </button>-->
<!--                        </div>-->
                    </form>
                </div>
            </div>
            <!-- 列表展示 -->
            <div>
                <table class="table table-striped table-hover">
                    <thead>
                    <tr>
                        <th><input type="checkbox">全选</th>
                        <th>ID</th>
                        <th>学号</th>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>楼栋</th>
                        <th>宿舍</th>
                        <th>状态</th>
                        <th>入住时间</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>
                            <input type="checkbox">
                        </td>
                        <td>1</td>
                        <td>101</td>
                        <td>123456</td>
                        <td>赏金</td>
                        <td>男</td>
                        <td>入住</td>
                        <td>2024-12-12</td>
                        <td>
                            <button type="button" class="btn btn-info btn-xs">详情</button>
                            <button type="button" class="btn btn-warning btn-xs btn-primary" data-toggle="modal"
                                    data-target="#updateModal">编辑
                            </button>
                            <button type="button" class="btn btn-danger btn-xs">删除</button>
                        </td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>
                            <input type="checkbox">
                        </td>
                        <td>2</td>
                        <td>102</td>
                        <td>1234567</td>
                        <td>干脆面</td>
                        <td>男</td>
                        <td>入住</td>
                        <td>2024-12-11</td>
                        <td>
                            <button type="button" class="btn btn-info btn-xs">详情</button>
                            <button type="button" class="btn btn-warning btn-xs btn-primary" data-toggle="modal"
                                    data-target="#updateModal">编辑
                            </button>
                            <button type="button" class="btn btn-danger btn-xs">删除</button>
                        </td>
                        <td></td>
                    </tr>
                    </tbody>
                </table>

                <nav aria-label="...">
                    共有<span id="total"></span>条记录
                    <span id="current-page"></span>/<span id="total-page"></span>页
                    <button class="btn btn-default btn-xs" id="index">首页</button>
                    <button class="btn btn-default btn-xs" id="prev">上一页</button>
                    <button class="btn btn-default btn-xs" id="next">下一页</button>
                    每页显示:
                    <select name="pageNumber">
                        <option value="5">5</option>
                        <option value="10">10</option>
                        <option value="15">15</option>
                    </select>
                    条
                    跳转到:
                    <input id="page-input" type="text" style="width: 50px">
                    <button class="btn btn-default btn-xs" id="jump">GO</button>
                </nav>

            </div>
        </div>
    </div>
</div>

<!-- 添加信息Modal -->
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">添加学生信息</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group ">
                        <label class="col-sm-2 control-label">姓名</label>
                        <div class="col-sm-10">
                            <input id="name" type="email" class="form-control" placeholder="请输入姓名">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">学号</label>
                        <div class="col-sm-10">
                            <input id="number" class="form-control" placeholder="请输入学号">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">性别</label>
                        <div class="col-sm-10">
                            <input id="gender" class="form-control" placeholder="请输入性别">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">楼栋</label>
                        <div class="col-sm-10">
                            <select class="from-control" name="building">
                                <option>请选择楼栋</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">宿舍</label>
                        <div class="col-sm-10">
                            <select class="from-control" name="dormitory">
                                <option>请选择宿舍</option>
                            </select>
                        </div>
                    </div>

<!--                    <div class="form-group">-->
<!--                        <label class="col-sm-2 control-label">状态</label>-->
<!--                        <div class="col-sm-10">-->
<!--                            <input  class="form-control" placeholder="请输入状态">-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <div class="form-group">-->
<!--                        <label class="col-sm-2 control-label">入住时间</label>-->
<!--                        <div class="col-sm-10">-->
<!--                            <input  class="form-control" placeholder="请输入入住时间">-->
<!--                        </div>-->
<!--                    </div>-->
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button id="submit-student" type="button" class="btn btn-primary">保存信息</button>
            </div>
        </div>
    </div>
</div>


<script>
    $(document).ready(function () {
        //加载数据
        first_page(1, 5, '', '');
    })

    //加载分页数据
    function first_page(page, pageSize, key, value) {
        // var pageNumber = $('select[name="pageNumber"]').val();
        $.ajax({
            url: '../student',
            type: 'post',
            dataType: 'json',
            data: {
                'page': page,
                'pageSize': pageSize,
                'key': key,
                'value': value,
                'method': 'paging'
            },
            success: function (result) {
                loadTableData(result, page, pageSize);
            },
            error: function () {
                layer.msg('网络异常');
            }
        })
    }

    //下一页
    $('#next').click(function () {
        //获取当前的页码数
        var current_page = $('#current-page').text();
        //获取总页数
        var total_page = $('#total-page').text();
        //判断
        if (current_page >= total_page) {
            layer.msg('已经是最后一页了');
        } else {
            //获取每页显示条数
            var pageNumber = $('select[name="pageNumber"]').val();

            var key = $('select[name="key"]').val();

            var value = $('#keyword').val().trim();
            $.ajax({
                url: '../student',
                type: 'post',
                dataType: 'json',
                data: {
                    'method': 'paging',
                    'page': parseInt(current_page) + 1,
                    'pageSize': pageNumber,
                    'key': key,
                    'value': value
                },
                success: function (result) {
                    //调用数据渲染函数
                    loadTableData(result, parseInt(current_page) + 1, pageNumber);
                },
                error: function () {
                    layer.msg('网络异常');
                }
            })
        }
    })

    //上一页
    $('#prev').click(function () {
        //获取当前的页码数
        var current_page = $('#current-page').text();
        //获取总页数
        var total_page = $('#total-page').text();
        //判断
        if (current_page <= 1) {
            layer.msg('已经是第一页了');
        } else {
            //获取每页显示条数
            var pageNumber = $('select[name="pageNumber"]').val();

            var key = $('select[name="key"]').val();

            var value = $('#keyword').val().trim();
            $.ajax({
                url: '../student',
                type: 'post',
                dataType: 'json',
                data: {
                    'method': 'paging',
                    'page': parseInt(current_page) - 1,
                    'pageSize': pageNumber,
                    'key': key,
                    'value': value
                },
                success: function (result) {
                    //调用数据渲染函数
                    loadTableData(result, parseInt(current_page) - 1, pageNumber)
                },
                error: function () {
                    layer.msg('网络异常')
                }
            })
        }
    })

    //跳转指定页
    $('#jump').click(function () {
        //获取输入
        //获取当前的页码数
        var current_page = $('#page-input').val();
        //获取总页数
        var total_page = $('#total-page').text();
        if (current_page == '') {
            layer.msg('请输入页码');
        } else {
            //判断为是否为数字并且超范围
            //判断
            if (isNaN(current_page) || current_page > total_page || current_page < 1) {
                layer.msg('超出页码范围');
            } else {
                //获取每页显示条数
                var pageNumber = $('select[name="pageNumber"]').val();

                var key = $('select[name="key"]').val();

                var value = $('#keyword').val().trim();
                $.ajax({
                    url: '../student',
                    type: 'post',
                    dataType: 'json',
                    data: {
                        'method': 'paging',
                        'page': current_page,
                        'pageSize': pageNumber,
                        'key': key,
                        'value': value
                    },
                    success: function (result) {
                        //调用数据渲染函数
                        loadTableData(result, current_page, pageNumber)
                    },
                    error: function () {
                        layer.msg('网络异常')
                    }
                })
            }
        }
    })

    //切换每页显示的条数
    $('select[name="pageNumber"]').change(function () {
        //获取每页显示条数
        var pageNumber = $('select[name="pageNumber"]').val();

        var key = $('select[name="key"]').val();

        var value = $('#keyword').val().trim();
        $.ajax({
            url: '../student',
            type: 'post',
            dataType: 'json',
            data: {
                'method': 'paging',
                'page': 1,
                'pageSize': pageNumber,
                'key': key,
                'value': value
            },
            success: function (result) {
                //调用数据渲染函数
                loadTableData(result, 1, pageNumber)
            },
            error: function () {
                layer.msg('网络异常')
            }
        })
    })

    //搜索按钮
    $('#search').click(function (){
        //获取每页显示条数
        var pageNumber = $('select[name="pageNumber"]').val();
        var key = $('select[name="key"]').val();
        var value = $('#keyword').val().trim();
        $.ajax({
            url: '../student',
            type: 'post',
            dataType: 'json',
            data: {
                'method': 'paging',
                'page': 1,
                'pageSize': pageNumber,
                'key': key,
                'value': value
            },
            success: function (result) {
                //调用数据渲染函数
                loadTableData(result, 1, pageNumber)
            },
            error: function () {
                layer.msg('网络异常')
            }
        })
    })

    function loadTableData(result, current_page, pageNumber) {
        console.log(current_page);
        console.log(result);
        if (result.code == 200) {
            var data = result.data;
            var html = '';
            var admin_role = '';
            for (let i = 0; i < data.length; i++) {
                html += '<tr>\n' +
                    '                        <td>\n' +
                    '                            <input type="checkbox" data-id="' + data[i].id + '">\n' +
                    '                        </td>\n' +
                    '                        <td>' + (i + 1) + '</td>\n' +
                    '                        <td>' + data[i].number + '</td>\n' +
                    '                        <td>' + data[i].name + '</td>\n' +
                    '                        <td>' + data[i].gender + '</td>\n' +
                    '                        <td data-buildingid="'+data[i].buildingId+'">' + data[i].buildingName + '</td>\n' +
                    '                        <td data-dormitoryid="'+data[i].dormitoryId+'">' + data[i].dormitoryName + '</td>\n' +
                    '                        <td>' + data[i].status + '</td>\n' +
                    '                        <td>' + data[i].createDate + '</td>\n' +
                    '                        <td>\n' +
                    '                            <button type="button" class="btn btn-info btn-xs">详情</button>\n' +
                    '                            <button type="button" class="btn btn-warning btn-xs btn-primary" data-toggle="modal"\n' +
                    '                                    data-target="#updateModal">编辑\n' +
                    '                            </button>\n' +
                    '                            <button type="button" class="btn btn-danger btn-xs">删除</button>\n' +
                    '                        </td>\n' +
                    '                        <td></td>\n' +
                    '                    </tr>';
            }
            $('tbody').html(html);
            //获取响应的总数据条数
            var total_count = data[0].totalCount;
            //写入指定位置
            $('#total').text(total_count);
            console.log(current_page);
            $('#current-page').text(current_page);
            var total_page = Math.ceil(total_count / pageNumber);
            $('#total-page').text(total_page);

        } else if (result.code == 100) {
            $('tbody').html('还没有管理员数据');
            $('total').text(0);
            $('current-page').text(1);
            $('total-page').text(1);
        }
    }

    //添加学生信息,动态加载楼栋
    $('#add-student').click(function (){
        //清空数据
        $('#number').val('');
        $('#name').val('');
        $('select[name="building"]').empty();
        $('select[name="building"]').append('<option value="0">请选择</option>');
        $('select[name="dormitory"]').empty();
        $('select[name="dormitory"]').append('<option value="0">请选择</option>');
        $.ajax({
            url:'../student',
            type:'post',
            dataType:'json',
            data:{
                'method':'loadBuilding'
            },
            success:function (result){
                if (result.code == 200 ){
                    for (let i = 0; i < result.data.length; i++) {
                        $('select[name="building"]').append('<option value="'+result.data[i].id+'">'+result.data[i].name+'</option>');
                    }
                }
            },
            error:function (){
                layer.msg('网络异常');
            }
        })
    })

    //选择完楼栋后动态加载宿舍信息
    $('select[name="building"]').change(function (){
        //清空宿舍下拉选
        $('select[name="dormitory"]').empty();
        $('select[name="dormitory"]').append('<option value="0">请选择</option>');
        //获取
        var buildingId = $('select[name="building"]').val();
        var ok = true;
        if (buildingId == 0){
            ok = false;
            layer.msg('请选择入住楼栋','select[name="building"]');
        }
        $.ajax({
            url:'../student',
            type:'post',
            dataType:'json',
            data:{
                'method':'loadDormitory',
                'buildingId':buildingId
            },
            success:function (result){
                if (result.code == 200){
                    for (var i = 0; i < result.data.length; i++) {
                        $('select[name="dormitory"]').append('<option value="'+result.data[i].id+'">'+result.data[i].name+'</option>');
                    }
                }
            },
            error:function (){
                layer.msg('网络异常');
            }
        })
    })

    //添加学生提交
    $('#submit-student').click(function (){
        //获取
        var number = $('#number').val();
        var stu_name = $('#name').val();
        var gender = $('#gender').val();
        var buildingId = $('select[name="building"]').val();
        var dormitoryId = $('select[name="dormitory"]').val();
        var ok = true;
        var reg = /^[0-9]{9}$/;
        //数据有效性
        if (number == '' || !reg.test(number)){
            ok = false;
            layer.tips('学号必须是9位数字','#number');
            return;
        }
        if (stu_name == ''){
            ok = false;
            layer.tips('姓名不能为空','#name');
            return;
        }
        if (ok){
            $.ajax({
                url:'../student',
                type:'post',
                dataType:'json',
                data:{
                    'method':'add',
                    'number':number,
                    'stu_name':stu_name,
                    'gender':gender,
                    'buildingId':buildingId,
                    'dormitoryId':dormitoryId
                },
                success:function (result){
                    if (result.code == 200){
                        layer.msg('添加成功');
                        //关闭模态窗
                        $('#addModal').modal('hide');
                        //加载第一页数据
                        var pageNumber = $('select[name="pageNumber"]').val();
                        var key = $('select[name="key"]').val();
                        var value = $('#keyword').val().trim();
                        first_page(1,pageNumber,key,value);
                    }else {
                        layer.msg('添加失败');
                    }
                },
                error:function (){
                    layer.msg('网络异常');
                }
            })
        }
    })
</script>
</body>
</html>
